<template>
  <div>
    <div class="app">
      <div class="head">常用应用</div>
      <ul class="app-box">
        <li
          v-for="(item, index) in arrM"
          :key="index"
          @click="tag(item.type, item.val)"
        >
          <img :src="item.img" alt="" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <images-material
      :dialog-images="dialogImages"
      :use-btn="false"
      :use-type="'all'"
      @close="dialogImages = false"
    />
  </div>
</template>

<script>
export default {
  components: {
    ImagesMaterial: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  data() {
    return {
      dialogImages: false,
      arrM: [
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E5%95%86%E5%93%81%E5%BD%95%E5%85%A5.svg",
          name: "商品录入",
          type: "goodsList",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E4%BC%9A%E5%91%98%E4%BD%93%E7%B3%BB.svg",
          name: "会员体系",
          type: "vipCard",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E9%85%8D%E9%80%81%E7%89%A9%E6%B5%81.svg",
          name: "配送物流",
          type: "merchantTemplate",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E5%88%86%E9%94%80.svg",
          name: "分销模块",
          type: "distributionUserList",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E8%B6%85%E5%80%BC%E6%8B%BC%E5%9B%A2.svg",
          name: "超值拼团",
          type: "spellGroupList",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E7%B4%A0%E6%9D%90%E5%BA%93.svg",
          name: "图片素材",
          type: "imagesUpdata",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E9%99%90%E6%97%B6%E6%8A%A2%E8%B4%AD.svg",
          name: "限时折扣",
          type: "limitList",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E5%95%86%E5%93%81%E8%AE%A2%E5%8D%95.svg",
          name: "商品订单",
          type: "orderAllList",
          val: "over"
        },
        {
          img:
            "https://oss.ztwlxx.cn/%E6%A6%82%E8%BF%B0_%E4%BC%98%E6%83%A0%E5%88%B8.svg",
          name: "优惠劵",
          type: "couponList",
          val: "over"
        }
      ]
    };
  },
  methods: {
    tag(t, v) {
      if (t === "imagesUpdata") {
        this.dialogImages = true;
      } else {
        this.$router.push({ name: t, params: { val: v } });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app {
  padding: 16px;
  height: 240px;
  background: #fff;
  margin-bottom: 16px;
  .head {
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #000000;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .app-box {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    li {
      text-align: center;
      font-size: 12px;
      cursor: pointer;
      img {
        width: 60px;
        height: 60px;
        margin: 45px 0 24px 0;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #000000;
        // font-weight: bold;
      }
    }
  }
}
</style>
